<script setup lang="ts">
import {onMounted, onUnmounted} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let centerMarker = null // 用于存储中心点标注
const center = [114.003723, 33.012131]

onMounted(async () => {
  const AMap = await AMapLoader.load({
    key: "2c06a4213c2b77f159ef05922e75245c",
    version: "2.0"
  })

  // 初始化地图
  map = new AMap.Map("container", {
    viewMode: "3D", // 是否为3D地图模式
    zoom: 15, // 初始化地图级别
    center: center, // 初始化地图中心点位置
  });

  // 创建中心点标注
  centerMarker = new AMap.Marker({
    position: center,
    map: map
  });
});

onUnmounted(() => {
  map?.destroy();
})
</script>

<template>
  <div id="container">
  </div>
</template>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
</style>